<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        .chart-container {
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<div class="chart-container">
    <div id="container1" style="height: 100%"></div>
</div>
<div class="chart-container">
    <div id="container2" style="height: 100%"></div>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">
    var dom1 = document.getElementById('container1');
    var myChart1 = echarts.init(dom1, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    // 发送请求获取商家订单状态数量数据
    axios.get('http://localhost:8080/order/getStatusCountBy102', {
        withCredentials: true
    })
        .then(response => {
            var data = response.data;
            var option1 = {
                title: {
                    text: '商家订单状态',
                    subtext: '订单状态统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '订单状态',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: data.data.status0Orders, name: '已提交' },
                            { value: data.data.status1Orders, name: '已接单' },
                            { value: data.data.status2Orders, name: '待确认' },
                            { value: data.data.status3Orders, name: '已完结' },
                            { value: data.data.status4Orders, name: '未完结' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            if (option1 && typeof option1 === 'object') {
                myChart1.setOption(option1);
            }

            window.addEventListener('resize', myChart1.resize);
        })
        .catch(error => {
            console.error('请求接口出错:', error);
        });

    var dom2 = document.getElementById('container2');
    var myChart2 = echarts.init(dom2, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    // 发送请求获取订单审批数量数据
    axios.get('http://localhost:8080/order/getStatus2CountBy102', {
        withCredentials: true
    })
        .then(response => {
            var data = response.data;
            var option2 = {
                title: {
                    text: '订单审批',
                    subtext: '订单审批数量',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '订单审批',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: data.data, name: '待审批订单' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            if (option2 && typeof option2 === 'object') {
                myChart2.setOption(option2);
            }

            window.addEventListener('resize', myChart2.resize);
        })
        .catch(error => {
            console.error('请求接口出错:', error);
        });
</script>
</body>
</html>
